<template>
  <div>

    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in itemList" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="16">
          <el-input
            v-model="searchModel.chapterName"
            placeholder="章节"
            clearable
          />
          <el-button
            type="primary"
            round
            icon="el-icon-search"
            @click="getThList"
          >查询
          </el-button>
        </el-col>
        <el-col :span="8" align="right">
          <el-button
            type="primary"
            icon="el-icon-plus"
            circle
            @click="openEditUI(null)"
          />
        </el-col>
      </el-row>
    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="thList" stripe style="width: 100%">
        <el-table-column label="#" width="80">
          <template slot-scope="scope">
            <!-- (pageNo-1) * pageSize + index + 1 -->
            {{
              (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="chapterName" label="章节名称" width="180"/>
        <el-table-column prop="chapterLink" label="章节链接" width="480">
          <template slot-scope="scope">
            <a :href="scope.row.chapterLink" target="_blank" class="blue-link">{{ scope.row.chapterLink }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="chapterCode" label="提取码" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.chapterCode">
              {{ scope.row.chapterCode }}
            </div>
            <div v-else>
              <el-button type="success" round @click="getUnLock">
                一键全部解锁
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 用户信息编辑对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
    >
      <el-form ref="userFormRef" :model="thForm">
        <el-form-item
          label="章节名字"
          prop="chapterName"
          :label-width="formLabelWidth"
        >
          <el-input v-model="thForm.chapterName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="章节链接" :label-width="formLabelWidth">
          <el-input v-model="thForm.chapterLink" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="章节提取码" :label-width="formLabelWidth">
          <el-input v-model="thForm.chapterCode" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTh">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import tb from '@/api/tb'

export default {
  data() {
    return {
      itemList: ['小毛驴电商自学一条龙 解锁全部课程需要4000点（200元可以兑换5000点）',
        '卡密联系客服 10元100点 25元400点 50元1000点 200元5000点',
        '1次起3个店铺 2个月内做9家店铺 2个月内不回本 课程费全退'],
      formLabelWidth: '130px',
      thForm: {
        chapterName: '',
        chapterCode: '',
        chapterLink: ''
      },
      dialogFormVisible: false,
      title: '',
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 5,
        chapterName: ''
      },
      thList: []
    }
  },
  created() {
    this.getThList()
  },
  methods: {
    saveTh() {
      // 触发表单验证
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          // 提交请求给后台
          tb.addTbTh(this.thForm).then(response => {
            // 成功提示
            this.$message({
              message: response.message,
              type: 'success'
            })
            // 关闭对话框
            this.dialogFormVisible = false
            // 刷新表格
            this.getThList()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearForm() {
      this.thForm = {}
      this.$refs.userFormRef.clearValidate()
    },
    openEditUI(id) {
      if (id == null) {
        this.title = '新增章节'
      } else {
        this.title = '修改用户'
        // 根据id查询用户数据
      }
      this.dialogFormVisible = true
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getThList()
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo
      this.getThList()
    },
    getThList() {
      tb.getThList(this.searchModel).then((response) => {
        this.thList = response.data.rows
        this.total = response.data.total
      })
    },
    getUnLock() {
      tb.tbUnLock().then(res => {
        // 成功提示
        if (res.code === 20000) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.getThList()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 20px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
